<template>
    <Layout>
        <Form :label-width="120" ref="formInline" :model="formInline">
            <Row class="query-form">
                <Col span="8" >
                    <FormItem label="用户名：" prop="userName">
                        <Input v-model="formInline.userName" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="cancel" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
        <Row class="query-form" v-if="buttonDisabled">
            <Col span="24">
                <Button size="large" class="ivu-btn-add" icon="md-add" @click="addModel">添加用户</Button>
                <userDom :isButton="true" ref="userDom" :placeholderStr="'绑定用户'"
                         :singleChoice=false :ifUser="true" :rootOrgName="orgName"
                         @setData = 'saveInfo'></userDom>
            </Col>
        </Row>
        <Table ref='table' :loading="loading" border :columns="baseColumns"
               :data="baseData" no-data-text="没有查询到相关数据!"  :height="tableHeight" highlight-row stripe size="small">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>

    </Layout>
</template>

<script>
    import {Api} from '@/api'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    import {formatDate} from '@/tools/index'
    import userDom from "@/components/input-user.vue";

    export default {
        name: "questionBase",
        components: {userDom},
        props: {
            orgName: {
                type: String,
            },
            visibleBindedUsers: {
                type: Boolean,
                default: false
            },
            buttonDisabled: {
                type: Boolean,
                default: false
            },
            paperTeamId: {
                type: String,
                default: ''
            },
        },
        data(){
            return{
                loading: true,
                formInline:{
                    userName: ''
                },
                tableHeight: '',
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                baseColumns: [
                    {type: 'index', title: '编号', width: 80, align: 'center', fixed: 'left'},
                    {title: '账号', align: 'center', key: 'account'},
                    {title: '用户名称', align: 'center', key: 'userName'},
                    {title: '单位名称', align: 'center', key: 'orgName'},
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        width: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: this.buttonDisabled ? 'red':'#d0d0d0' ,
                                        pointerEvents: this.buttonDisabled ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteRow(params.row);
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
                buttonLoading:false,
                baseData: [],


            }
        },
        mounted(){
            this.tableHeight = window.innerHeight*0.85 - this.$refs.table.$el.offsetTop-40;
            this.query();
        },
        watch: {
        },
        methods:{
            query(){
                this.loading = true;
                let data = {
                    pageNumber: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                };
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.post(Api.paperTeam+'/getListByTeamId/'+ this.paperTeamId +'/users',data).then((res) => {
                    this.baseData = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch( e => {
                    this.$Message.error('请求失败');
                });
            },

            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            cancel(){
                this.pagedata.currentPage = 1
                this.formInline = {};
                this.query();
            },
            addModel(){
                this.$refs.userDom.openOrgModal();
            },
            saveInfo(data){
                if (data.length > 0) {
                    let arr = []
                    data.forEach(v => {
                        arr.push(v.userId);
                    });
                    this.$http.post(Api.paperTeam+'/'+ this.paperTeamId +'/users', arr).then((res) => {
                        this.query();
                        this.$Message.success({
                            content: '成功',
                            duration: 4
                        });
                        this.buttonLoading = false
                    }).catch( e => {
                        this.$Message.error({
                            content: '请求失败',
                            duration: 4
                        });
                        this.buttonLoading = false
                    });
                }
            },
            deleteRow(row){
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>确定删除该题库</p>',
                    okText: '确认',
                    onOk: () => {
                        this.$http.delete(Api.paperTeam+'/delUserById/'+row.id).then((res) => {
                            this.$Message.success({content:'删除成功',duration: 4});
                            this.modal1 = false;
                            this.query();
                        })
                    },
                    cancelText: '取消'
                });
            },
            closeModal(){
                this.form1data = {};
                this.modal1 = false;
            },
            setOrgId(data) {
                if (data && data instanceof Array && data.length > 0) {
                    this.$set(this.form1data, 'orgId', data[data.length - 1])
                } else {
                    this.form1data.orgId = null;
                }
            },
            setOrgName(data) {
                this.form1data.orgName = data;
            },
            setOrgId1(data) {
                this.formInline.companyId = data[data.length - 1];
            },
            setOrgName1(data) {
                this.formInline.companyName = data;
            },

        }
    }
</script>

<style lang='css' scoped>
    @import '../../../../index.css';
</style>
